<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <HmHeader :list='list' @fn=fn></HmHeader>

    <!-- 主体部分 -->
    <HmBody :list='yanse' @delet="delet" @change="change" :gaoliang="gaoliang"></HmBody>

    <!-- 底部部分 -->
    <HmFoot :list='list' @qing="qing" v-if="yin" @gaoliang="gaoliang" :type="type"></HmFoot>
  </section>
</template>

<script>
import HmHeader from './components/HmHeader.vue'
import HmBody from './components/HmBody.vue'
import HmFoot from './components/HmFoot.vue'

export default {
  data () {
    return {
      list: JSON.parse(localStorage.getItem('todo'))||[],
      // [
        // { id: 1, name: '吃饭', isDone: true },
        // { id: 2, name: '睡觉', isDone: false },
        // { id: 3, name: '打豆豆', isDone: true }
      // ] ,
      type:'a'
    }
  },
  components: {
    HmHeader,
    HmBody,
    HmFoot
  },
  methods:{
    fn(obj){
      this.list=[...this.list,obj]
      
    },
    delet(id){
    this.list= this.list.filter(item=>item.id!==id)
    },
    change(id){
      this.list.forEach((item)=>{
        if(item.id===id){
          item.isDone=!item.isDone
        }
      })
    },
    qing(){
      this.list= this.list.filter(item => item.isDone === false)
    },
    gaoliang(id){
        this.type=id
        console.log(this.type);
    }
   
  },
  computed:{
    yin(){
    return  this.list.length
    },
    yanse(){
      if(this.type==='a'){
        return this.list
      }else if(this.type==='aa'){
        return this.list.filter(item=>item.isDone===false)
      }else{
        return this.list.filter(item=>item.isDone===true)
      }
    }
    
  },
  watch:{
    list:{
      deep:true,
      handler(value){
        localStorage.setItem('todo',JSON.stringify(value))
      },
      immediate:true
    }
  }
}
</script>

<style></style>
